
import { Row, Col, Form, Input, Button, Typography, Select } from "antd"
import { UploadOutlined } from '@ant-design/icons';
import myinfo from "../../mobx/info";
import { useRef, useState } from "react";
import { annoTypeList, toast } from "../../utils/commom";
import { baseURL } from "../../api/request";
import { ajax } from "../../api";
import { values } from "mobx";
import { reg } from "../../utils/validate";

const { Title } = Typography

export default function Out({ history }: any) {
    const { userInfo } = myinfo
    const [imgSrc, setimgSrc] = useState<any>(null)
    const [form] = Form.useForm()
    const ufile: any = useRef()
    const onFinish = async (v: any) => {
        // v.userInfo = userInfo
        console.log(v)
        let { code,result }: any = await ajax.addexecutive(v)
        if (code == 200) {
            // console.log(result)
            form.resetFields()
            // history.push('/main/executive/recruiting')
        }
    }

    const onFinishFailed = () => {
        toast.error('请输入有效的招聘信息')
    }
    const startUploadeFile = async () => {
        const file = ufile.current.files[0]
        const data = new FormData()
        data.append('file', file)
        let { code, path }: any = await ajax.uploadfile(data)
        if (code == 200) {
            setimgSrc(path)
            form.setFieldsValue({ desc: path })
        }
    }
    const handleClickUpload = () => {
        ufile.current.click()
    }
    return (
        <div>
            <Title>添加招聘信息</Title>
            <Row>
                <Col>
                    <Form
                        name="basic"
                        labelCol={{ span: 24 }}
                        wrapperCol={{ span: 24 }}
                        initialValues={{
                            username:userInfo?.username
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        form={form}
                    >
                        <Form.Item
                            label="招聘标题"
                            name="title"
                            rules={[{ required: true, message: '请输入招聘标题!' }]}
                        >
                            <Input placeholder="请输入招聘标题" />
                        </Form.Item>

                        <Form.Item
                            label="招聘人姓名"
                            name="username"
                            rules={[{ required: true, message: '请输入招聘人姓名!' }]}
                        >
                            <Input disabled  placeholder="请输入招聘人姓名" />
                        </Form.Item>

                        <Form.Item
                            label="招聘人手机号"
                            name="phone"
                            rules={[{ required: true, message: '请输入招聘人手机号!' },
                            {pattern:reg.phone,message:'请输入正确的手机号'}
                        ]}
                        
                        
                        >
                            <Input placeholder="请输入招聘人手机号" />
                        </Form.Item>
                        <Form.Item
                            label="招聘信息"
                            name="content"
                            rules={[{ required: true, message: '请输入招聘信息!' }]}
                        >
                            <Input placeholder="请输入招聘信息" />
                        </Form.Item>
                        <Form.Item
                            label="招聘描述"
                            name="desc"
                            rules={[{ required: true, message: '请上传招聘图片!' }]}
                        >
                            <input type="file" ref={ufile} style={{ display: "none" }} onChange={startUploadeFile} />
                            <Button onClick={handleClickUpload} type="primary">{imgSrc ? '替换' : '上传'}招聘描述图片</Button>
                            {
                                imgSrc && <img src={imgSrc.replace(/public/, baseURL)} alt="" style={{ width: '100%', height: 180, borderRadius: "6px", margin: "10px 0" }} />
                            }
                        </Form.Item>

                        <Form.Item >
                            <Row>
                                <Col span={24} >
                                    <Button danger block htmlType="submit"  > 添加招聘 </Button>
                                </Col>
                            </Row>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        </div>
    )
}
